<script setup lang="ts">
import { graphic } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'

import useEcharts, { type EChartsOption } from '~/composables/chart'

import BlockHead from './block-head.vue'
import defaults from './default-chart-option'

import type { PersonnelInfo } from '../type'

defineOptions({
  name: 'ItemEight',
})

const props = defineProps<{
  data: PersonnelInfo
}>()

const { chartRef: chartRef1, setOption: setOption1 } = useEcharts()
const { chartRef: chartRef2, setOption: setOption2 } = useEcharts()

const data = shallowRef<{ name: string, enter: string, leave: string }[]>([])
const option1 = computed<EChartsOption>(() => {
  return {
    tooltip: {
      ...defaults.tooltip,
      axisPointer: {
        type: 'cross',
      },
    },
    grid: {
      ...defaults.grid,
      right: 0,
      left: 50,
    },
    xAxis: {
      type: 'value',
      inverse: true,
      axisLine: { show: false },
      axisTick: {
        show: false,
      },
      axisLabel: { show: false },
      max: (value: any) => value.max * 2,
    },
    yAxis: [{
      type: 'category',
      position: 'right',
      data: data.value.map(v => v.name),
      axisLine: { show: false },
      axisTick: {
        show: false,
      },
      axisLabel: { show: false },
    }, {
      type: 'category',
      position: 'right',
      data: data.value.map(v => v.name),
      axisLine: { show: false },
      axisTick: {
        show: false,
      },
      axisLabel: { show: false },
    }],
    series: [
      {
        name: '入职',
        type: 'bar',
        showBackground: true,
        barWidth: 20,
        data: data.value.map(v => v.enter),
        itemStyle: {
          opacity: 0,
        },
        yAxisIndex: 0,
        tooltip: { show: false },
      },
      {
        yAxisIndex: 1,
        name: '入职',
        type: 'bar',
        data: data.value.map(v => v.enter),
        barWidth: 12,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(60, 178, 84, 1)' },
            { offset: 1, color: 'rgba(166, 239, 174, 1)' },
          ]),
        },
        label: {
          show: true,
          color: 'rgba(166, 239, 174, 1)',
          position: 'left',
          fontWeight: 600,
        },
      },
    ],
  }
})
const option2 = computed<EChartsOption>(() => {
  return {
    tooltip: {
      ...defaults.tooltip,
      axisPointer: {
        type: 'cross',
      },
    },
    grid: {
      ...defaults.grid,
      right: 40,
    },
    xAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: {
        show: false,
      },
      axisLabel: { show: false },
      max: (value: any) => value.max * 2,
    },
    yAxis: [{
      type: 'category',
      data: data.value.map(v => v.name),
      axisLine: { show: false },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 24,
      },
    }, {
      type: 'category',
      data: data.value.map(v => v.name),
      axisLine: { show: false },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    }],
    series: [
      {
        yAxisIndex: 0,
        name: '离职',
        type: 'bar',
        barWidth: 20,
        showBackground: true,
        data: data.value.map(v => v.leave),
        itemStyle: {
          opacity: 0,
        },
        tooltip: { show: false },
      },
      {
        yAxisIndex: 1,
        name: '离职',
        type: 'bar',
        barWidth: 12,
        data: data.value.map(v => v.leave),
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(46, 137, 250, 1)' },
            { offset: 1, color: 'rgba(158, 198, 248, 1)' },
          ]),
        },
        label: {
          show: true,
          position: 'right',
          color: 'rgba(192, 231, 255, 1)',
          fontWeight: 600,
        },
      },
    ],
  }
})

onMounted(() => {
  data.value = props.data.map((v, i) => {
    return {
      name: `第${1 + i}季度`,
      enter: v.newUser,
      leave: v.resignationUser,
    }
  })
  setOption1(option1.value)
  setOption2(option2.value)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead is-big title="入/离职人数" />
    <div class="block-body h-48 w-full flex flex-auto flex-wrap">
      <div class="h-full w-full flex items-center gap-3 px-8">
        <div class="flex-shrink-0">
          <div class="rounded-12 bg-[rgba(46,137,250,0.15)] px-2 py-12 write-vertical-left opacity-80 shadow shadow-cyan shadow-inset">
            入职
          </div>
        </div>
        <div class="h-full flex-1/2">
          <div ref="chartRef1" style="width:100%;height:100%" />
        </div>
        <div class="h-full flex-1/2">
          <div ref="chartRef2" style="width:100%;height:100%" />
        </div>
        <div class="flex-shrink-0">
          <div class="rounded-12 bg-[rgba(46,137,250,0.15)] px-2 py-12 write-vertical-left opacity-80 shadow shadow-cyan shadow-inset">
            离职
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
